<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ESP Tool</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css">
        <link
            href="https://fonts.googleapis.com/css?family=Orbitron"
            rel="stylesheet"
        />
        <link rel="icon" href="../assets/favicon.ico" />
         <script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1 align="center"><p><img src="../assets/esp-logo.png" width="42" height="42" style="vertical-align:middle" crossorigin></img> ESP Tool</p></h1>
        <h4 align="center">A Serial Flasher utility for Espressif chips</h4>
        <div id="safariErr" style="display:none"><p align="center" style="color:red">This tool is not supported on Safari browser!</p>
        </div>
        <div class="container" id="main">
            <hr/>
            <div id="program">
                <h3> Program </h3>
                <label for="baudrates" id="lblBaudrate">Baudrate:</label>
                <label style="display:none" id="lblConnTo">Connected to device: </label>
                <select name="baudrates" id="baudrates">
                    <option value="921600">921600</option>
                    <option value="460800">460800</option>
                    <option value="230400">230400</option>
                    <option value="115200">115200</option>
                </select>

                <input class="btn btn-info btn-sm" type="button" id="connectButton" value="Connect" />
                <input class="btn btn-warning btn-sm" type="button" id="disconnectButton" value="Disconnect" />
                <input class="btn btn-danger btn-sm" type="button" id="eraseButton" value="Erase Flash" />
                <br>

                <div class="alert alert-danger alert-dismissible" id="alertDiv" style="display:none; margin-top:10px">
                    <a href="#" class="close" aria-label="close" onclick="$('.alert').hide()">&times;</a>
                    <span id="alertmsg"></span>
                </div>

                <div id="files">
                    <table class="table table-striped" id="fileTable">
                        <thead class="thead-light">
                            <tr>
                                <th>Flash Address</th>
                                <th>File</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                        </tbody>
                    </table>
                    <input class="btn btn-info btn-sm" type="button" id="addFile" value="Add File" />
                    <input class="btn btn-info btn-sm" type="button" id="programButton" value="Program" />
                </div>
                <output id="list"></output>
                <hr/>
            </div>
            <div id="console">
                <h3>Console </h3>
                <label style="display:none" id="lblConsoleFor">Connected to device: </label>

                <input class="btn btn-info" type="button" id="consoleStartButton" value="Start" />
                <input class="btn btn-info" type="button" id="consoleStopButton" value="Stop" />
                <input class="btn btn-info" type="button" id="resetButton" value="Reset" />
                <hr/>
            </div>
            <div id="terminal"></div>
        </div>
        <script src="index.ts" type="module"></script>
        <script>
            // Safari 3.0+ "[object HTMLElementConstructor]"
            var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

            if(isSafari)
            {
               document.getElementById("safariErr").style.display = "inline";
               document.getElementById("main").style.display = "none";
            }
        </script>
    </body>
</html>
